<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorate="~{admin/adminJs}" xmlns:v-on="http://www.w3.org/1999/xhtml">

<body layout:fragment="content">
    <div id="treeMenu" style="margin: 20px 0 0 0;">
        <el-tree
                :data="menus"
                show-checkbox
                node-key="id"
                ref="treeMenu"
                :default-expanded-keys="[]"
                :default-checked-keys="checkedKeys"
                :props="defaultProps"
                @node-click="nodeClick"
                style="width: 300px;margin-left: 70px;"
                icon-class="el-icon-arrow-right"
                :default-expand-all="true"
                :check-strictly="true"
                :check-on-click-node="true"
                :expand-on-click-node="false"
                >
        </el-tree>
        <el-row style="margin-top: 30px;text-align: center">
            <el-button size="mini" type="primary" @click="onSubmit" round>保存</el-button>
            <el-button size="mini" type="warning" @click="closeParentDialog(false)" round>离开</el-button>
        </el-row>
    </div>

    <script>

        var roleId=RequestUtils.get('roleId');

        var vm=  new Vue({
            el: '#treeMenu',
            data:function () {
                var data=ajaxPost("/admin/system/menu/permissionTree",{roleId:roleId});
                defaultProps= {
                    children: 'children',
                    label: 'name',
                    icon:'icon'
                };
                var menus=data.menus;
                return {defaultProps:defaultProps,menus:menus,checkedKeys:data.checkedKeys,roleId:roleId};
            },
            methods: {
                nodeClick:function (data) {
                    /*var checkedKeys=this.$refs.treeMenu.getCheckedKeys();
                    for(var i=0;i<checkedKeys.length;i++){
                        if(data.id==checkedKeys[i]){
                            this.$refs.treeMenu.setChecked(data.id,false);
                            return ;
                        }
                    }
                    this.$refs.treeMenu.setChecked(data.id,true);*/
                },closeParentDialog:function(isRefresh){
                    window.parent.closeDialog(isRefresh);
                },onSubmit:function () {

                    var checkedKeys=this.$refs.treeMenu.getCheckedKeys();
                    var halfCheckedKeys=this.$refs.treeMenu.getHalfCheckedKeys();
                    checkedKeys.push.apply(checkedKeys,halfCheckedKeys);
                    EasyuiUtils.confirmSave("/admin/user/role/rolePermissionSave",{
                        roleId:this.roleId,
                        permissionIds:checkedKeys
                    },function () {
                        vm.closeParentDialog(false);
                    });
                }
            }
        });

        $(function () {
            var nodes=$(".el-tree-node__label");
            nodes.each(function(index,node){
                var nodeName=$(node).html();
                if(nodeName.indexOf('permission--') > -1){
                    nodeName=nodeName.replace('permission--','');
                    $(node).html('<a><i class="el-icon-lock"></i>'+nodeName+'</a>');
                }else{
                    $(node).html('<a><i class="el-icon-menu"></i>'+nodeName+'</a>');
                }


            });
            //alert(nodes.length+"--"+nodes[0]);
        })

    </script>
</body>

</html>